﻿@{
    ViewData["Title"] = "UserShow";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@* <!DOCTYPE html> *@
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui Table with Pagination Example</title>
    <script src="~/layui/layui.js"></script>
</head>
<body>

    <div class="layui-container" style="width:95%;margin:auto">
        <h1>用户显示</h1>

        @* 查询条件 *@
        <form class="layui-form layui-row layui-col-space16">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="UserName" id="UserName" placeholder="请输入" class="layui-input">
                </div>
                <button type="button" class="layui-btn" id="selectUser">查询</button>
                <button type="reset" class="layui-btn layui-bg-orange">重置</button>
                <button type="button" class="layui-btn layui-bg-blue" lay-on="addPopUp">添加</button>
            </div>
        </form>

        @* 数据显示、分页 *@
        <div class="layui-row">
            <div class="layui-col">
                <table class="layui-table" id="userForm"></table>
            </div>
            <div class="layui-col">
                <div id="userPage"></div>
            </div>
        </div>

        @* 用户添加 *@
        <div id="addUserForm" style="display: none; padding: 20px;">

            <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                <div class="demo-login-container">
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-user"></i>
                            </div>
                            <input type="text" name="username" value="" lay-verify="required" placeholder="真实姓名" lay-reqtext="请填写真实姓名" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-cellphone"></i>
                            </div>
                            <input type="text" name="username" value="" lay-verify="required" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="operateTpl">
        <a style="color:red" onclick="DeleteUser('{{d.Id}}')">删除</a>
        <a style="color:orange" onclick="editUser('{{d.Id}}')">编辑</a>
    </script>

    @* 用户显示、查询、分页 *@
    <script>

    </script>

    @* 用户添加 *@
    <script>
        var formHtml = `<form class="layui-form" action="">
                          <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline layui-input-wrap">
                              <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline layui-input-wrap">
                              <input type="password" name="password" lay-verify="required|pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">真实姓名</label>
                                    <div class="layui-input-inline layui-input-wrap">
                              <input type="text" name="realname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <div class="layui-inline">
                              <label class="layui-form-label">手机号</label>
                              <div class="layui-input-inline layui-input-wrap">
                                <input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                              </div>
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <div class="layui-input-block">
                              <button type="submit" class="layui-btn" lay-submit lay-filter="addUser">立即提交</button>
                              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                          </div>
                        </form>`;
    </script>

    @* 用户删除、编辑 *@
    <script>
        // 删除用户函数
        function DeleteUser(Id) {
            if (confirm('确定要删除吗？')) {
                // 发送删除请求到后端
                $.ajax({
                    url: 'http://8.140.245.229:8000/AuthorizationSet/api/User/DelUser', // 替换为后端删除用户接口的实际URL
                    type: 'DELETE',
                    data: { Id: Id }, // 传递用户ID参数
                    success: function (res) {
                        console.log(res);

                        // 根据后端返回的结果进行相应操作，比如刷新页面或重新加载表格数据
                        // if (res.success) {
                        //     layer.msg('删除成功');
                        //     // 在这里进行刷新页面或重新加载表格数据的操作
                        // } else {
                        //     layer.msg('删除失败，请重试');
                        // }
                    },
                    error: function () {
                        layer.msg('删除失败，请重试');
                    }
                });
            }
        }

        // 编辑用户函数
        function editUser(userId) {
            // 在这里可以打开一个编辑用户的模态框或页面，供用户修改用户信息
            // 根据userId获取用户信息，并填充到编辑表单中
            // 用户点击保存时发送 AJAX 请求到后端，调用编辑用户的接口
            // 编辑成功后进行相应的操作，比如刷新页面或重新加载表格数据
        }
    </script>

    <script src="~/js/rbac/user.js"></script>
</body>
</html>